<template> 
<div>
    <div id="box" class="box">
        <div class="box-one">
            <h2>{{ msg }}<br>__________________</h2>
            <div class="box-one-content">
                <img src="~@/assets/img2/光遇.jpg" width="300px" height="250px">
                <span>{{ msg2 }}</span>
            </div>
           
            
          
        </div>
        <div id="two" class="box-two">
            <h2>{{ msg3 }}<br>__________________</h2>
            <div class="box-one-content">
                <img src="~@/assets/img2/光遇1.jpg" width="300px" height="250px">
                <ul>
                    <li v-for="(item,index) in list" :key="index">{{item.title}}</li>
                </ul>

                
            </div>
        </div>
        
    </div>
</div>



</template>

<script setup>
import { ref } from 'vue'
//使用ref函数定义单文本数据，并返回一个响应式的变量
const msg = ref('光遇简介')
const msg2 = ref('《光·遇》是由游戏制作人陈星汉及其团队Thatgamecompany开发的社交冒险游戏,国内由网易游戏代理运营.该作于2019年6月21日在App Store发行,2020年7月9日在安卓平台正式上线.2021年6月登陆Switch在游戏中,玩家将化身"光之后裔"，承载着先祖的意志，与好友携手，在天空王国的奇妙大陆上，展开一场充满奇遇的冒险')
const msg3 = ref('光遇攻略')
const list = ref([{title:'晨岛'},
                {title:'云野'}, 
                {title:'雨林'},
                {title:'雨林'},
                {title:'暮土'},
                {title:'禁阁'}])
        

/*使用data()函数定义数据，并返回一个对象，对象中包含数据属性和方法。
export default {
    data() {
      return {
        msg: '光遇简介',
        msg2: '《光·遇》是由游戏制作人陈星汉及其团队Thatgamecompany开发的社交冒险游戏,国内由网易游戏代理运营.该作于2019年6月21日在App Store发行,2020年7月9日在安卓平台正式上线.2021年6月登陆Switch在游戏中,玩家将化身"光之后裔"，承载着先祖的意志，与好友携手，在天空王国的奇妙大陆上，展开一场充满奇遇的冒险',
        msg3: '光遇攻略',
        list: [{title:'晨岛'}
              ,{title:'云野'}
              ,{title:'雨林'}
              ,{title:'雨林'}
              ,{title:'暮土'}
              ,{title:'禁阁'}
        ]
      }
    }
  }*/
 </script> 

<style scoped>
h2{
	font-family: "华文琥珀";
	font-size: 40px;
	color: #FF6600;
    font-weight: normal;
}

.box{
    width: 100%;
    height: 400px;
    display: flex;/*设置父元素为flex布局*/
    flex-wrap: wrap;
    justify-content: space-between;

}
.box-one{
    width: 50%;
    height: 400px;
}
.box-two{
    width: 50%;
    height: 400px;
}
.a{
    margin-top: 100px;
    font-size: 20px;
    color: #FF6600;
    font-family: "微软雅黑";
    font-weight: bold;
}
.box-one-content{
    width: 100%;
    height: 400px;
    display: flex;/*设置父元素为flex布局*/
    flex-wrap: wrap;
    
}

span{
        font-size: 20px;
        font-family: 隶书;
        color: #333;
        margin-top: 10px;
        
        float: right;

        width: 400px;
        height: 140px;
    }
li{
    font-size: 25px;
        font-family: 隶书;
        color: #333;
        margin-top: 10px;
    }

</style>